<template>
    <el-badge :value="props.len" :max="99" class="car-box">
        <img class="car" @click="openCar" src="../../assets/car.png" alt="">
    </el-badge>

    <el-dialog v-model="dialogVisible" title="购物车" width="1200">
        <el-table :data="props.data" show-summary :summary-method="getSummaries">
            <!-- <el-table-column prop="date" label="商户名称" /> -->
            <el-table-column prop="buy_num" label="商品图片">
                <template #default="scope">
                    <img :src="formatUrl(scope.row.goods.goods_master_image)" alt="" style="width: 50px;height: 50px;">
                </template>
            </el-table-column>

            <el-table-column prop="goods.goods_name" label="商品名称" />
            <el-table-column prop="buy_num" label="商品数量"></el-table-column>
            <el-table-column prop="pay_price" label="下单价格"></el-table-column>
            <el-table-column prop="order_price" label="支付价格"></el-table-column>
            <el-table-column prop="order_profile" label="下单利率"></el-table-column>
            <el-table-column prop="osn" label="订单号"></el-table-column>
            <el-table-column prop="order_profile" label="操作">
                <template #default="scope">
                    <el-button type="danger" :loading="btnLogin" @click="onDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" :loading="loadi" @click="downOrder">
                    下单
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, defineProps } from 'vue';
import { GoodsApi } from "~/api/goods";
import { formatUrl } from "~/http/http";
import { h } from 'vue'

const btnLogin = ref(false)
const props = defineProps(['len', 'data', 'getCartList'])
setTimeout(() => {
    console.log(props.len)
}, 3000);
const loadi = ref(false)

const dialogVisible = ref(false);
const getSummaries = (param) => {
    const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
                '总计',
            ])
            return
        }
        const values = data.map((item) => {
            if (column.property == 'order_price') {
                return Number(item[column.property])
            } else {
                return ""
            }

        })
        if (!values.every((value) => Number.isNaN(value))) {
            sums[index] = `${values.reduce((prev, curr) => {
                const value = Number(curr)
                if (!Number.isNaN(value)) {
                    console.log(prev + curr, ';;;;;;;')
                    return prev + curr
                } else {
                    return prev
                }
            })}`
        } else {
            sums[index] = 'N/A'
        }
    })
    console.log(sums[4])
    sums[4] = h('div', { style: { color: 'red', fontWeight: 'bold', fontSize: '20px' } }, [
        sums[4],
    ])
    return sums

}
const openCar = () => {
    dialogVisible.value = true;
    console.log(dialogVisible.value)
}

const downOrder = async () => {
    if (props.data.length) {
        loadi.value = true
        let arr = []
        props.data.map(item => {
            arr.push(item.id)
        })
        try {
            await GoodsApi.setOrder({ cart_order_ids: arr.toString() })
        } catch (error) {
            console.log(error)
        }
        props.getCartList()
        loadi.value = false
        dialogVisible.value = false
    }

}
const onDel = async (record) => {

    btnLogin.value = true
    await GoodsApi.delCart({ cart_id: record.id })
    props.getCartList()
    btnLogin.value = false
}
</script>
<style>
.car-box {
    position: fixed;
    right: 50px;
    bottom: 60px;
    z-index: 100;
}

.car {

    width: 50px;
    height: 50px;
    z-index: 100;
    cursor: pointer;
}
</style>
